import React, {memo, useEffect, useState} from 'react';
import { useLogLife } from './hooks/index';

const Home = memo(() => {
  useLogLife("home");
  return <h1>Home Page</h1>
})

const About = memo(() => {
  useLogLife("about");
  return <h1>About Page</h1>
})
const App = memo(() => {
  const [isShowHome, setIsShowHome] = useState(true);
  const [isShowAbout, setIsShowAbout] = useState(true);

  useLogLife("app");

  return (
      <div>
        <h1>App</h1>
        <button onClick={() => setIsShowHome(!isShowHome)}>切换Home</button>
        <button onClick={() => setIsShowAbout(!isShowAbout) }>切换About</button>
        { isShowHome && <Home/>}
        { isShowAbout && <About/>}
      </div>
  );
});

export default App;